<template>
  <div class="mod-demo-echarts">
    <div id="J_chartBarBox" class="chart-box"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        chartBar: null,
        optionList: []
      }
    },
    created () {
      this.queryDepartmentJob()
    },
    methods: {
      // 获取部门概况分类
      queryDepartmentJob () {
        this.$http({
          url: this.$http.adornUrl('/edu/teduteacherinfo/queryDepartmentJob'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.optionList = data.data
            console.log(this.optionList)
            this.initChartBar()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 柱状图
      initChartBar () {
        var option = {
          title: {
            text: 'Sector overview',
            bottom: 'auto',
            textStyle: {
              fontSize: 30
            },
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: (params) => {
              console.log(params[0].dataIndex)
              console.log(this.optionList[params[0].dataIndex].dataList)
              let str = 'Relevant teachers：</br>'
              this.optionList[params[0].dataIndex].dataList.map(item => {
                str += item + '</br>'
              })
              return str
            }
          },
          xAxis: [
            {
              type: 'category',
              data: this.optionList.map(item => item.name)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              data: this.optionList.map(item => item.value),
              type: 'bar'
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      }
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    .chart-box {
      min-height: 600px;
    }
  }
</style>
